<template>
  <div>
    <div style="display: flex;margin-left: 10px;padding-bottom: 5px;">
      <j-space>
        <label style="color: #515a6e; display: inline-block">退货日期：</label>
        <JPicker v-model="tuiBillDate" />
        <label style="color: #515a6e;  display: inline-block; margin-left: 10px">备注：</label>
        <JInput  v-model="tuiRemark" />
      </j-space>
    </div>
    <div class="back-goods">
      <j-grid ref="jgridBackRef" :columns="fields" v-model="list" :show-page="false" :offset-height="15" @edit-closed="editClosed" @cell-click="cellClick" />
    </div>
    <j-dialog v-model="showUnit" :z-index="9" :width="300" title="选择单位">
      <tiny-select v-model="unit" placeholder="请选择" @change="changeUnit">
        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > </tiny-option>
      </tiny-select>
    </j-dialog>
  </div>

</template>
<script>
import tool from "@/utils/tool";

export default {
  name: "backList",
  data () {
    return {
      tuiBillDate: tool.getDay(),
      tuiRemark: '',
      options: [
      ],
      fields: [
        { type: 'index', width: 50 },
        { field: 'locationName', title: '仓库', width: 80, align: 'left' },
        { field: 'invName', title: '商品名称', width: 205, align: 'left' },
        { field: 'spec', title: '规格', width: 70, align: 'center' },
        { field: 'locationName', title: '仓库', width: 70, align: 'center' },
        { field: 'unit', title: '单位', width: 70, align: 'center'},
        {
          field: 'qty',
          title: '退货数量',
          width: 100,
          align: 'right',
          formatter: 'formatQty',
          sum: true,
          editor: { component: 'input', autoselect: true ,events:{
            keydown:(cell, key) => {
              if(key.key === 'Enter') {
                this.$refs.jgridBackRef.setActiveCell(cell.row, 'price')
              }
              if(key.key === 'ArrowRight') {
                this.$refs.jgridBackRef.setActiveCell(cell.row, 'price')
              }
              if(key.key === 'ArrowDown') {
                if((cell.data.length - 1) > cell.$rowIndex) {
                  this.$refs.jgridBackRef.setActiveCell(cell.data[cell.$rowIndex+1], 'qty')
                }
              }
              if(key.key === 'ArrowUp') {
                if(cell.$rowIndex > 0) {
                  this.$refs.jgridBackRef.setActiveCell(cell.data[cell.$rowIndex-1], 'qty')
                }
              }
            }
            }},
        },
        {
          field: 'price',
          title: '退货单价',
          width: 100,
          align: 'right',
          formatter: 'formatMoney',
          editor: { component: 'input', autoselect: true ,events:{
              keydown:(cell, key) => {
                if(key.key === 'Enter') {
                  this.$refs.jgridBackRef.setActiveCell(cell.row, 'remark')
                }
                if(key.key === 'ArrowRight') {
                  this.$refs.jgridBackRef.setActiveCell(cell.row, 'remark')
                }
                if(key.key === 'ArrowLeft') {
                  this.$refs.jgridBackRef.setActiveCell(cell.row, 'qty')
                }
                if(key.key === 'ArrowDown') {
                  if((cell.data.length - 1) > cell.$rowIndex) {
                    this.$refs.jgridBackRef.setActiveCell(cell.data[cell.$rowIndex+1], 'price')
                  }
                }
                if(key.key === 'ArrowUp') {
                  if(cell.$rowIndex > 0) {
                    this.$refs.jgridBackRef.setActiveCell(cell.data[cell.$rowIndex-1], 'price')
                  }
                }
              }
            }},
        },
        { field: 'amount', title: '退货金额', width: 80, align: 'right', formatter: 'formatMoney', sum: true },
        { field: 'remark', title: '备注', width: 150, align: 'center', editor: { component: 'input', autoselect: true,events:{
              keydown:(cell, key) => {
                if(key.key === 'ArrowLeft') {
                  this.$refs.jgridBackRef.setActiveCell(cell.row, 'price')
                }
                if(key.key === 'ArrowDown') {
                  if((cell.data.length - 1) > cell.$rowIndex) {
                    this.$refs.jgridBackRef.setActiveCell(cell.data[cell.$rowIndex+1], 'remark')
                  }
                }
                if(key.key === 'ArrowUp') {
                  if(cell.$rowIndex > 0) {
                    this.$refs.jgridBackRef.setActiveCell(cell.data[cell.$rowIndex-1], 'remark')
                  }
                }
              }
            } } },
      ],
      list: [],
      showUnit: false,
      unit: '',
      row: {}
    }
  },
  emits: ['changeVal'],
  methods: {
    editClosed(cell) {
      let field = cell.column.property;
      let row = cell.row;
      if (field === 'qty') {
        row.qty = Math.abs(tool.xe.toNumber(row.qty));
        if (row.qty < 0) return tool.err('数量小于0');
        row.amount = tool.xe.multiply(row.qty, row.price);
        this.$refs.jgridBackRef.updateFooter();
      }
      if (field === 'price') {
        row.price = Math.abs(tool.xe.toNumber(row.price));
        row.amount = tool.xe.multiply(row.price, row.qty);
        this.$refs.jgridBackRef.updateFooter();
      }
      this.$emit('changeVal', this.getBackList())
    },
    setData (list) {
      if(this.list.length === 0)
        this.list = list
    },
    setDate (date) {
      this.tuiBillDate = date
    },
    getBackList () {
      let ret = []
      for (let i = 0; i <  this.list.length; i++) {
        let row = tool.xe.clone(this.list[i])
        row.qty = tool.xe.toNumber(row.qty)
        row.price = tool.xe.toNumber(row.price)
        row.amount = tool.xe.toNumber(row.amount)
        if(row.qty > 0) {
          ret.push(row)
        }
      }
      return {
        billDate: this.tuiBillDate,
        remark: this.tuiRemark,
        list: this.list
      }
    },
    cellClick (cell) {
      if(cell.column.property === 'unit') {
        this.row = cell.row
        this.options = []
        this.options.push({label: cell.row.unit1, defaultValue: cell.row.unit1})
        if(cell.row.unit2)
          this.options.push({label: cell.row.unit2, defaultValue: cell.row.unit2})
        this.unit = cell.row.unit
        this.showUnit = true
      }
    },
    changeUnit (val) {
      for (let i = 0; i < this.list.length; i++) {
        if(this.list[i].invId === this.row.invId) {
          this.list[i].unit = val
        }
      }
      // this.row.unit = val
     this.showUnit = false
    }
  }
}
</script>
<style scoped lang="scss">

</style>